<template>
	<div id="out">
			<el-button type="mini" @click="showAdd()">新增</el-button>
		<div id="showAddPage" style="display: none;">
			<input type="text" placeholder="新增任务状态" v-model="BugstateParam.bugstateDetail" class="addIn">
			<input type="text" placeholder="创建人" v-model="BugstateParam.createbyName" class="addIn">
			<input type="button" value="提交" @click="addBugstate()" class="addButton">
			<input type="button" value="关闭" @click="closeAdd()" class="addButton">
		</div>
		
		<div id="showUpdatePage" style="display: none;">
			<input type="text" placeholder="更新任务状态" v-model="BugstateParam.bugstateDetail" class="addIn">
			<input type="text" placeholder="创建人" v-model="BugstateParam.createbyName" class="addIn">
			<input type="button" value="提交" @click="updateBugstate()" class="addButton">
			<input type="button" value="关闭" @click="closeUpdate()" class="addButton">
		</div>
		<el-table :data="tableData" border style="width: 50%" id="table">

			<el-table-column fixed prop="bugstateId" label="编号" width="150" align=center>
			</el-table-column>
			<el-table-column prop="bugstateDetail" label="任务状态" width="150" align=center>
			</el-table-column>
			<el-table-column prop="createbyName" label="创建人" width="150" align=center>
			</el-table-column>
			<el-table-column fixed="right" label="操作" align=center>
				<div class="handler">更新</div>
				<template slot-scope="scope">
					<el-button type="mini" @click="showUpdatePage(scope.row)">
						更新
					</el-button>
					<el-button type="mini" @click="deleteBugstate(scope.row)">
						删除
					</el-button>
				</template>
			</el-table-column>
		</el-table>
	</div>

</template>

<script>
	import $ from "jquery"
	export default {
		inject:['reload'],
		methods: {
			showUpdatePage:function(value){
				$("#showUpdatePage").attr("style","display:block");
				this.BugstateParam.bugstateId=value.bugstateId
			},
			updateBugstate:function(){
				var thii = this
				$.ajax({
					url: "http://localhost/buttonStatement/bugstate",
					data:thii.BugstateParam,
					type:"PUT",
					headers:{"token":localStorage.getItem("token")},
					success: function(data) {
						thii.reload();
						alert(data.message)
						thii.closeUpdate()
						thii.showBugstate()
					}
				})
			},
			deleteBugstate: function(value) {
				$.ajax({
					url: "http://localhost/buttonStatement/bugstate",
					data: {
						"id": value.bugstateId
					},
					type: "DELETE",
					headers:{"token":localStorage.getItem("token")},
					success: function(data) {
						thii.reload();
						alert(data.message)
						thii.showBugstate()
					}
				})
			},
			addBugstate: function() {
				var thii = this
				$.ajax({
					url: "http://localhost/buttonStatement/bugstate",
					data: thii.BugstateParam,
					type: "POST",
					headers:{"token":localStorage.getItem("token")},
					success: function(data) {
						thii.reload();
						alert(data.message)
						thii.closeAdd()
						thii.showBugstate()
					}
				})
			},
			showBugstate: function() {
				var thii = this
				$.ajax({
					url: "http://localhost/buttonStatement/bugstate",
					type: "GET",
					headers:{"token":localStorage.getItem("token")},
					success: function(data) {
						thii.tableData = data.list
						console.log(thii.tableData)
					}
				})
			},
			showAdd: function() {
				$("#showAddPage").attr("style", "display:block");
			},
			closeAdd: function() {
				$("#showAddPage").attr("style", "display:none");
			},
			closeUpdate:function(){
				$("#showUpdatePage").attr("style", "display:none");
			}
			
		},
		created: function() {
			this.showBugstate();
		},

		data() {
			return {
				tableData: [{
				}],
				BugstateParam: {
					bugstateId: "",
					createbyName: "",
					bugstateDetail: "",
				},
				
			}
		},

	}
</script>

<style>
	
	.handler {
		float: left;
		margin-left: 20px;
	}

	#showAddPage {
		border: 1px solid red;
		width: 20%;
		height: 200px;
		position: absolute;
		margin-top: 100px;
		margin-left: 600px;
		z-index: 5;
		background-color: #696969;
	}
	#showUpdatePage{
		border: 1px solid red;
		width: 20%;
		height: 200px;
		position: absolute;
		margin-top: 100px;
		margin-left: 600px;
		z-index: 5;
		background-color: #696969;
	}
	

	#table {
		margin-left: 400px;
		margin-top: 100px;
	}

	.addIn {
		margin-top: 30px;
	}

	.addButton {
		margin-left: 15px;
	}
</style>